'use strict';
import React,{Component} from 'react';
import Util from '../../common/util';
import * as URLconstant from '../../constant/URLconstant'
import Header from '../../common/header';
import SecIndex from './seckillIndex';
import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import MyStroage from "../../common/myStroage";
import Toast from '../../common/ToastUtil';
export default class list extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            statusName:[{ 'name': '抢购中', 'status': '0' }, { 'name': '即将开始', 'status': '1' }, { 'name': '往期抢购', 'status': '2' }],
            hoverStatus:'0',
            secList:null
        };
      }

    componentDidMount() {
        this.getSeckillList()
    }


      getSeckillList(){
          let url
          let hoverStatus = this.state.hoverStatus
          if(hoverStatus==0){
            url = URLconstant.SECKILL_LIST1
          }else if(hoverStatus==1){
              url = URLconstant.SECKILL_LIST2
          }else{
              url = URLconstant.SECKILL_LIST3
          }
          let datakey=[]
          datakey['user_id']='1'
          Util.get(url,datakey,this.getListSuc.bind(this),this.errorCallback.bind(this))
      }

    getListSuc(datas){
          if(datas.status==0){
              this.setState({
                  secList:datas.data.list
              })
          }
    }

    errorCallback(err){

    }

    async selectStatus(status){
          await this.setState({
              hoverStatus:status,
              secList:null
          })
        this.getSeckillList()
    }

      showHeader(){
          let statusName = this.state.statusName
          let hoverStatus = this.state.hoverStatus
          return(
              <View style={styles.status_header}>
                  {
                      statusName.map((item,index)=>{
                          return(
                              <TouchableOpacity onPress={()=>this.selectStatus(item.status)} key={index} style={styles.name_item}>
                                  <Text style={item.status==hoverStatus?styles.select_txt:styles.normal_txt}>{item.name}</Text>
                              </TouchableOpacity>
                          )
                      })
                  }
              </View>
          )
      }

    toIndex(spree_id,goods_id){
        this.props.navigator.push({
            component:SecIndex,
            passProps:{
                spree_id:spree_id,
                goods_id:goods_id
            }
        })
    }

      showList(){
          let secList = this.state.secList
          return(
              <View>
                  {
                      secList.map((item,index)=>{
                          return(
                              <TouchableOpacity onPress={()=>this.toIndex(item.spree_id,item.goods_id)} key={index} style={styles.sec_item}>
                                  <View style={styles.sec_item_left}>
                                      <Image
                                          source={{uri:item.picture}}
                                          style={styles.sec_item_left}
                                          resizeMode={'cover'}
                                      />
                                  </View>
                                  <View style={styles.sec_item_right}>
                                    <Text style={{fontSize:14,color:"#000"}}>{item.goods_name}</Text>
                                    <View style={{flexDirection:'row',alignItems:'flex-end',justifyContent:'space-between'}}>
                                        <View style={{justifyContent:'center'}}>
                                            <Text style={{fontSize:18,color:"#f00"}}>¥{item.price}</Text>
                                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                                <Text style={{fontSize:12,color:"#969696"}}>原价:</Text>
                                                <Text style={{fontSize:12,color:"#969696",textDecorationLine:'line-through'}}>¥{item.old_price}</Text>
                                            </View>
                                        </View>
                                        {this.buyPercent(item)}
                                    </View>
                                      {this.showSecBtn(item)}
                                  </View>
                              </TouchableOpacity>
                          )
                      })
                  }
              </View>
          )
      }

    showSecBtn(item){
          let hoverStatus = this.state.hoverStatus
        if(hoverStatus==0){
              return(
                  <View style={[styles.sec_btn,{width:75,height:30,alignItems:'center',justifyContent:'center',borderRadius:5,backgroundColor:"#f65061"}]}>
                      <Text style={{fontSize:14,color:"#fff"}}>去秒杀</Text>
                  </View>
              )
        }else if(hoverStatus==1){
              return(
                  <View style={[styles.sec_btn]}>
                      <Text style={{fontSize:14,color:"#333"}}>开启时间:{item.start_time}</Text>
                  </View>
              )
        }else{
              return(
                  <View style={[styles.sec_btn,{width:75,height:30,alignItems:'center',justifyContent:'center',borderRadius:5,backgroundColor:"#969696"}]}>
                      <Text style={{fontSize:14,color:"#fff"}}>已结束</Text>
                  </View>
              )
        }
    }

    buyPercent(item){
          let sales = parseFloat(item.sale)
        let total = parseFloat(item.sale)+parseFloat(item.stock)
        let percent =sales/total*100
        if(percent>0){
            percent= percent.toFixed(2)
        }
          return(
             <View style={{flexDirection:'row',alignItems:'center'}}>
                 <Text style={{fontSize:12,color:"#696969",marginRight:5}}>已售:{percent}{percent>0?'%':''}</Text>
                 {/*<View style={styles.percent_gb}>*/}
                     {/*<View style={[styles.percent_active,{width:percent}]}></View>*/}
                 {/*</View>*/}
             </View>
          )
    }

      render(){
          let secList = this.state.secList
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '秒杀列表',id:2}}/>
                  {this.showHeader()}
                  {
                      secList==null?
                          <View style={{flex:1,}}>
                              {Util.loading()}
                          </View>
                          :
                          <View style={{flex:1}}>
                              {
                                  secList.length==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>没有秒杀</Text>
                                      </View>:
                                      <ScrollView style={{flex:1}}>
                                          {this.showList()}
                                      </ScrollView>
                              }
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    status_header:{
        height:40,
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"#fff",
        marginBottom:10
    },
    name_item:{
        flex:1,
        height:40,
        alignItems:"center",
        justifyContent:"center",
    },
    select_txt:{
        fontSize:14,
        color:"rgba(0,0,0,1)"
    },
    normal_txt:{
        fontSize:14,
        color:"rgba(0,0,0,.5)"
    },
    sec_item:{
        backgroundColor:"#fff",
        padding:10,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        marginBottom:10
    },
    sec_item_left:{
        width:100,
        height:100
    },
    sec_item_right:{
        flex:1,
        paddingLeft:10,
        height:100,
        justifyContent:'space-between'
    },
    percent_gb:{
        width:100,
        height:20,
        backgroundColor:"#c0c0c0",
    },
    percent_active:{
        height:20,
        borderRadius:10,
        backgroundColor:"#f65061",
        position:'absolute',
        top:0,
        left:0,
    },
    sec_btn:{
        position:"absolute",
        right:10,
        top:40
    }
})